<!-- 页面：通用自定义导航栏组件 | 时间：2025-01-14 -->
<template>
  <view class="custom-nav-bar" :style="navBarStyle">
    <!-- 状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    <!-- 导航栏内容 -->
    <view class="nav-content" :style="{ height: titleBarHeight + 'px' }">
      <!-- 左侧内容 -->
      <view class="nav-left" @click="handleLeftClick">
        <slot name="left">
          <up-icon
            v-if="showBack"
            name="arrow-left"
            :color="iconColor"
            size="20"
          ></up-icon>
        </slot>
      </view>
      <!-- 中间标题 -->
      <view class="nav-center">
        <slot name="center">
          <text class="nav-title" :style="{ color: titleColor }">{{
            title
          }}</text>
        </slot>
      </view>
      <!-- 右侧内容 -->
      <view class="nav-right" @click="handleRightClick">
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed, onMounted } from "vue";
import { getStatusBarHeight, getTitleBarHeight } from "@/utils/system";

const props = defineProps({
  // 标题文本
  title: {
    type: String,
    default: "",
  },
  // 是否显示返回按钮
  showBack: {
    type: Boolean,
    default: true,
  },
  // 背景色
  backgroundColor: {
    type: String,
    default: "#ffffff",
  },
  // 标题颜色
  titleColor: {
    type: String,
    default: "#333333",
  },
  // 图标颜色
  iconColor: {
    type: String,
    default: "#333333",
  },
  // 是否固定定位
  fixed: {
    type: Boolean,
    default: false,
  },
  // 是否透明背景
  transparent: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["leftClick", "rightClick"]);

// 状态栏高度
const statusBarHeight = getStatusBarHeight();

// 标题栏高度
const titleBarHeight = getTitleBarHeight();

// 总高度
const totalHeight = computed(() => statusBarHeight + titleBarHeight);

// 导航栏样式
const navBarStyle = computed(() => {
  const style = {
    height: totalHeight.value + "px",
    backgroundColor: props.transparent ? "transparent" : props.backgroundColor,
  };

  if (props.fixed) {
    style.position = "fixed";
    style.top = "0";
    style.left = "0";
    style.right = "0";
    style.zIndex = "999";
  }

  return style;
});

// 左侧点击事件
const handleLeftClick = () => {
  // if (props.showBack) {
  //   uni.navigateBack();
  // }
  emit("leftClick");
};

// 右侧点击事件
const handleRightClick = () => {
  emit("rightClick");
};

// 暴露导航栏高度给父组件使用
defineExpose({
  navBarHeight: totalHeight.value,
  statusBarHeight,
  titleBarHeight,
});
</script>

<style lang="scss" scoped>
.custom-nav-bar {
  width: 100%;
  background-color: var(--bg-white);

  .status-bar {
    width: 100%;
  }

  .nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16rpx;

    .nav-left {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      height: 100%;
      min-width: 60rpx;
    }

    .nav-center {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;

      .nav-title {
        font-size: var(--font-size-lg);
        font-weight: 500;
        text-align: center;
      }
    }

    .nav-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      height: 100%;
      min-width: 60rpx;
    }
  }
}
</style>
